<template>
    <div id="demo" style=" position: absolute;left: 0;width: 100%;height: 90vh;"></div>
</template>

<script>
    import {BMPGL} from "../../utils/bmp"

    export default {
        data: function () {
            return {
                ak: 'kCdsmR8yHuGYzZzlp6GiUyxTUZmYawoC'
            }
        },

        mounted() {
            this.initMap();
        },
        methods: {
            initMap() {
                BMPGL(this.ak).then((BMapGL) => {

                    let map = new BMapGL.Map("demo");
                    let point = new BMapGL.Point(116.926947,31.437672)
                    map.centerAndZoom(point, 11)
                    map.enableScrollWheelZoom(true)
                    map.setHeading(0)
                    //倾斜度
                    map.setTilt(60)
                    var view = new mapvgl.View({
                        map: map
                    });

                    var data = [{
                        geometry: {
                            type: 'Point',
                            coordinates: [116.926947,31.437672]
                        },
                        properties: {
                            count: 100
                        }
                    }];

                    var fanLayer = new mapvgl.FanLayer({
                        color: '#14f9f9',
                        data: data,
                        step: 0.1,
                        size: function (data) {
                            return data.properties.count * 200;
                        }
                    });
                    view.addLayer(fanLayer);
                })

            }
        }

    }

</script>


<style>


</style>
